<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper/swiper.css">
    <script src="./jquery-1.11.3.min.js"></script>
    <script src="./swiper/swiper.js"></script>
    <style>
        div.swiper-container{
            width: 100%;
        }
        /*div.swiper-slide{margin: 0 20px}*/
        div.swiper-container div.swiper-wrapper div.swiper-slide{
            width: 820px;
        }
        div.swiper-slide img{
              width: 100%;
          }
        vedio{
            display: block;
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./expreience/expreience/slide1.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./expreience/expreience/slide2.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./expreience/expreience/slide3.png" alt="">
            </div>
            <div class="swiper-slide">

                <img src="./expreience/expreience/slide4.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./expreience/expreience/slide5.png" alt="">
            </div>
        </div>
    </div>
    <vedio
            width="600"
            height="400"
            controls="controls"
            preload="auto"
            poster="./expreience/expreience/banner.png"
    >
        <!--<source-->
                <!--src="https://ueapp.oss-cn-hangzhou.aliyuncs.com/video/website/shop/20181114/prestrainVideo.mp4?OSSAccessKeyId=LTAI9JChDZiFugwT&Expires=1902184144&Signature=jJYhokbGuIlK1OZyomWNOYjKXt8%3D"-->
                <!--type="video/mp4"-->
        <!--&gt;-->

    </vedio>


    <video
            src="http://183.131.60.24/om.tc.qq.com/AgCWYPjWqkXMmPXA9aJkN8YNozg2DToul8h0RgT0aaaU/uwMRJfz-r5hgYaQXGdGnCwQsKf_dEsnq3UJztMoyPd8/x0739ufa9gi.p701.1.mp4?sdtfrom=v1105&guid=6c4316ca6116171356515ad5b19da6aa&vkey=26182758FEBDFEEE8AA857B4F7DF118FD03C7843BEAD23D9C919872F163F434011286AFC5BA19BA66B489BE6AF7041F56895290CCE351E9A2EEFC20A498D5196F0EFDCCB01B37ECA26749A6AD4EAA3A6805F54637BF1C10F6092EE3E02F5F8AE61F8CDE2094D703E6E199651BE6259D3832D14D38F12EBFB" id="video1"

            preload="auto"
            poster="./expreience/expreience/banner.png"
    >
    </video>

    <script>
        $(function () {
            var mySwiper = new Swiper(".swiper-container",{
                direction: 'horizontal',
                loop: true,
                slidesPerView: "auto",
                centeredSlides:true,
                spaceBetween: '1.5625%',
                slideToClickedSlide:true

            })
        });
    </script>
</body>
</html>